<template>
<!--
  可以直接使用后端传递来的 JsonResult 对象逐级显示出数据，例如：
  :value="'￥' + cdmReportData.data[0].salesToday"
  或者在 commonDataMixin 中将该值返回，如同下面的使用方法
  :value="'￥' + cdmSalesToday"
 -->
    <common-card
        title="累计销售额"
        :value="'￥' + cdmSalesToday">

    <template>
<!--        <div>wordCloud:</div>-->
        <div class="compare-wrapper">
            <div class="compare">
                <span>日同比</span>
                <span class="emphasis">{{cdmSalesGrowthLastDay}}%</span>
                <div class="increase"></div>
            </div>
            <div class="compare">
                <span>月同比</span>
                <span class="emphasis">{{cdmSalesGrowthLastMonth}}%</span>
                <div class="decrease"></div>
            </div>
        </div>
    </template>
    <template v-slot:footer>
        <div>
            <span>昨日销售额</span>
            <span class="emphasis">￥ {{cdmSalesLastDay}}</span>
        </div>
    </template>
    </common-card>
</template>

<script>
    import commonCardMixin from '../../mixins/commonCardMixin'
    import commonDataMixin from "../../mixins/commonDataMixin";

    /**
     * 初期这里是引用 CommonCard ，其语法格式是：
     * import CommonCard from '../CommonCard'
     * export default {
     *  components: {
     *      CommonCard
     *  }
     * }
     *
     * 使用 mixin 后为下面的格式
     */
    export default {
        mixins: [commonCardMixin,commonDataMixin],
    }
</script>

<style lang="scss" scoped>
    .compare-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .compare {
            display: flex;
            align-items: center;

            margin-top: 3px;
            font-size: 12px;
            color: #666;
            height: 50%;


        }
    }

    span {
        font-size: 12px;
    }


</style>
